<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%-- 添加登录检查 --%>
<c:if test="${empty user}">
    <% response.sendRedirect("login.jsp"); %>
</c:if>
<html>
<head>
    <title>我的同程</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <link rel="stylesheet" href="statics/css/My_fellow_traveler.css">
</head>
<body>
<!-- 在页面顶部添加隐藏域 -->
<input type="hidden" id="hiddenUsername" value="${user.username}">
<!-- 顶部导航栏 -->
<div id="bog-box-top">
    <div id="navbar-left">

        <ul>
            <li><span><a id="login-text-index" href="/login.jsp">您好，请登录</a><span id="tuichu">退出</span></span>
            </li>
            <li><span id="zhuce"><a href="/register.jsp">注册</a></span></li>
            <li><img src="./static/img/pc_index_gister.gif"></li>
        </ul>
    </div>

    <nav>
        <ul class="nav-list">
            <li class="nav-item">
                <a class="nav-link">
                    Language
                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M6 9l6 6 6-6"/>
                    </svg>
                </a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item"><img src="statics/img/rBLkCVvWbqmAJWxmAAABQaM8azg489.png">English</a>
                    <a href="#" class="dropdown-item"><img src="statics/img/rBLkCVvS7pSAa_ssAAAA82XoyWY361.png">中文</a>
                </div>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">我的订单</a>
            </li>
            <li class="nav-item">
                <a class="nav-link">
                    我的同程
                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M6 9l6 6 6-6"/>
                    </svg>
                </a>
                <div class="dropdown-menu">
                    <a href="#my-orders" class="dropdown-item">我的订单</a>
                    <a href="#profile-info" class="dropdown-item">我的信息</a>
                    <a href="#profile-favorites" class="dropdown-item">我的收藏</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link">
                    客服服务
                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M6 9l6 6 6-6"/>
                    </svg>
                </a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">帮助中心</a>
                    <a href="#" class="dropdown-item">在线客服</a>
                    <a href="#" class="dropdown-item">人工申诉</a>
                    <a href="#" class="dropdown-item">抱团定制</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link">
                    合作中心
                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M6 9l6 6 6-6"/>
                    </svg>
                </a>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">网站加盟</a>
                    <a href="#" class="dropdown-item">合作加盟</a>
                    <a href="#" class="dropdown-item">门票合作</a>
                    <a href="#" class="dropdown-item">商旅合作</a>
                </div>
            </li>
        </ul>
    </nav>
</div>

<!-- Logo图片 -->
<div>
    <img src="statics/img/PS2lfS0492.jpg" style="margin-top: 25px">
</div>

<!-- 导航栏 -->
<div id="GYH-nav">
    <div class="GYH-nav-container">
        <ul class="GYH-nav-list">
            <li class="GYH-nav-item">
                <a href="/index.jsp" class="GYH-nav-link">首页</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/jd-index.jsp" class="GYH-nav-link">酒店</a>
                <div class="GYH-dropdown">
                    <a href="jd-index.jsp   " class="GYH-dropdown-item">国内酒店</a>
                </div>
            </li>
            <li class="GYH-nav-item">
                <a href="/search_tickets.jsp" class="GYH-nav-link">机票</a>
                <div class="GYH-dropdown">
                    <a href="/flight/domestic" class="GYH-dropdown-item">国内机票</a>
                    <a href="/flight/international" class="GYH-dropdown-item">国际机票</a>
                </div>
            </li>
            <li class="GYH-nav-item">
                <a href="/train.jsp" class="GYH-nav-link">火车票</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/car" class="GYH-nav-link">汽车船票</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/scenicjd.jsp" class="GYH-nav-link">景点</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/local" class="GYH-nav-link">周边团购</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/domestic" class="GYH-nav-link">境内游</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/international" class="GYH-nav-link">出境游</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/post" class="GYH-nav-link">邮轮</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/visa" class="GYH-nav-link">签证</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/strategy.jsp" class="GYH-nav-link">攻略</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/corporate" class="GYH-nav-link">企业商旅</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/corporate" class="GYH-nav-link">亮丽内蒙古</a>
            </li>
            <li class="GYH-nav-item">
                <a href="/corporate" class="GYH-nav-link">更多</a>
            </li>
        </ul>
    </div>
</div>

<!-- 侧边栏导航 -->
<div class="sidebar-nav">
    <ul>
        <li><a href="#my-ly" data-target="my-ly">我的同程</a></li>

        <li class="menu-item">
            <a href="#my-orders" data-target="my-orders">我的订单</a>
        </li>

        <li class="menu-item">
            <a href="#" class="has-submenu">我的发票<span class="arrow"></span></a>
            <ul class="submenu">
                <li><a href="#invoice-title" data-target="invoice-title">发票抬头</a></li>
                <li><a href="#invoice-list" data-target="invoice-list">发票列表</a></li>
            </ul>
        </li>

        <li class="menu-item">
            <a href="#" class="has-submenu">我的钱包<span class="arrow"></span></a>
            <ul class="submenu">
                <li><a href="#wallet-bonus" data-target="wallet-bonus">奖金账户</a></li>
                <li><a href="#wallet-redpacket" data-target="wallet-redpacket">我的红包</a></li>
            </ul>
        </li>

        <li class="menu-item">
            <a href="#" class="has-submenu">个人中心<span class="arrow"></span></a>
            <ul class="submenu">
                <li><a href="#profile-info" data-target="profile-info">我的信息</a></li>
                <li><a href="#profile-favorites" data-target="profile-favorites">我的收藏</a></li>
                <li><a href="#profile-reviews" data-target="profile-reviews">我的点评</a></li>
                <li><a href="#profile-security" data-target="profile-security">安全中心</a></li>
            </ul>
        </li>

        <li class="menu-item">
            <a href="#" class="has-submenu">常用信息管理<span class="arrow"></span></a>
            <ul class="submenu">
                <li><a href="#frequent-travelers" data-target="frequent-travelers">常用旅客</a></li>
                <li><a href="#mailing-address" data-target="mailing-address">邮寄地址</a></li>
                <li><a href="#bank-cards" data-target="bank-cards">常用银行卡</a></li>
            </ul>
        </li>

        <li class="menu-item">
            <a href="#" class="has-submenu">服务中心<span class="arrow"></span></a>
            <ul class="submenu">
                <li><a href="#" data-target="service-booking">机票预约</a></li>
            </ul>
        </li>
    </ul>
</div>

<!-- 主内容区域 -->
<div class="main-content">
    <!-- 我的同程 -->
    <div class="content-section" id="my-ly">
        <div class="user-info">
            <div class="user-avatar">
                <img src="statics/img/touxiang.jpg"
                     style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover;">
            </div>
            <div class="user-details">
                <div class="user-name">尊敬的会员</div>
                <div class="user-status">
                    账户实名：<a href="#">去认证</a><br>
                    账户安全：<span class="security-level">强</span>
                    <a href="#profile-security">提升安全等级</a>
                </div>
            </div>
        </div>

        <div class="stats-container">
            <div class="stat-card">
                <div class="stat-value">0</div>
                <div class="stat-label">待支付订单</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">0</div>
                <div class="stat-label">待出行订单</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">0</div>
                <div class="stat-label">待点评订单</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">0</div>
                <div class="stat-label">可用红包</div>
            </div>
        </div>

        <div class="order-list">
            <div class="order-header">
                <h2 class="order-title">最近订单</h2>
            </div>
            <div id="recentOrders" class="recent-orders-section">
            </div>
        </div>
    </div>

    <!-- 我的订单 -->
    <div class="content-section" id="my-orders">
        <div class="order-tabs">
            <button class="tab-btn active" data-type="all">全部订单</button>
            <button class="tab-btn" data-type="hotel">酒店订单</button>
            <button class="tab-btn" data-type="scenic">景点订单</button>
            <button class="tab-btn" data-type="ticket">车票订单</button>
        </div>

        <div class="order-content">
            <table class="order-table">
                <thead>

                </thead>
                <tbody id="orderTableBody">

                </tbody>
            </table>
        </div>
    </div>

    <!-- 发票抬头部分 -->
    <div class="content-section" id="invoice-title">
        <div class="section-header">
            <div class="title-wrapper">
                <h1 class="section-title">新增发票抬头</h1>
                <span class="company-notice">*请确保纳税人识别号与抬头名称对应匹配</span>
            </div>
        </div>
        <div class="content-card">
            <form class="invoice-form" method="post">
                <div class="form-group">
                    <label class="form-label">抬头类型</label>
                    <div class="radio-group">
                        <label class="radio-label">
                            <input type="radio" name="invoice-type" value="公司" checked>
                            <span class="radio-text">公司</span>
                        </label>
                        <label class="radio-label">
                            <input type="radio" name="invoice-type" value="个人或行政机关">
                            <span class="radio-text">个人或行政机关</span>
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">发票抬头</label>
                    <input type="text" class="form-input" name="in_header" placeholder="请填写发票抬头">
                </div>
                <div class="form-group taxpayer-id">
                    <label class="form-label">纳税人识别号</label>
                    <input type="text" class="form-input" name="tin" placeholder="税务登记证上编号，至少15位">
                </div>
                <button type="submit" class="submit-btn">保存</button>
            </form>
        </div>
    </div>

    <div class="content-section" id="invoice-list">
        <div class="section-header">
            <h2 class="section-title">发票列表</h2>
        </div>
        <div class="content-card">
            <div class="empty-state">
                <p>暂无发票记录</p>
            </div>
        </div>
    </div>

    <!--我的钱包部分-->
    <div class="content-section" id="wallet-bonus">
        <div class="bonus-account">
            <div class="bonus-header">
                <div class="bonus-balance">
                <span class="balance-item">
                    我的点评奖金余额：<span class="balance-amount">¥0.00</span>
                </span>
                    <span class="balance-item">
                    我的立返奖金余额：<span class="balance-amount">¥0.00</span>
                </span>
                </div>
            </div>

            <div class="bonus-tabs">
                <a href="#" class="bonus-tab active" data-type="review" style="font-size: 16px;font-weight: bold">我的点评奖金账户</a>
                <a href="#" class="bonus-tab" data-type="instant"
                   style="font-size: 16px;font-weight: bold">我的立返奖金账户</a>
            </div>

            <div class="bonus-tabs">
                <a href="#" class="bonus-tab active" data-type="income">我的返现收入</a>
                <a href="#" class="bonus-tab" data-type="expense">我的奖金支出</a>
            </div>

            <div class="bonus-content">
                <div class="empty-bonus">
                    <p>暂无奖金记录</p>
                </div>
            </div>
        </div>
    </div>

    <div class="content-section" id="wallet-redpacket">
        <div class="redpacket-container">
            <div class="redpacket-tabs">
                <a href="#unused" class="redpacket-tab">未使用</a>
                <a href="#history" class="redpacket-tab active">历史记录</a>
            </div>

            <div class="redpacket-content">
                <div class="empty-redpacket">
                    <p class="empty-text">哎呀,您暂时还没有历史的红包哦~</p>
                </div>
            </div>
        </div>
    </div>

    <!--我的信息部分-->
    <div class="content-section" id="profile-info">
        <div class="profile-container">
            <div class="profile-header">
                <div class="profile-avatar">
                    <img src="statics/img/touxiang.jpg" alt="用户头像">
                    <div class="member-tag">基本会员</div>
                    <div class="profile-progress">
                        <div class="progress-bar">
                            <div class="progress" style="width: 45%"></div>
                        </div>
                        <span class="progress-text">资料完整度 45%</span>
                    </div>
                </div>
            </div>

            <div class="profile-form">
                <div class="form-group">
                    <label class="required">昵称</label>
                    <input type="text" class="form-input" name="nickname" value="">
                </div>

                <div class="form-group">
                    <label class="required">真实姓名</label>
                    <input type="text" class="form-input" name="username" value="" readonly>
                </div>

                <div class="form-group">
                    <label>手机号码</label>
                    <div class="phone-input">
                        <input type="hidden" id="hiddenPhone" value="${user.ipone}">
                        <input type="text" class="form-input" name="phone" value="" readonly>
                        <a href="#" class="modify-link">修改手机号>></a>
                    </div>
                </div>

                <div class="form-group">
                    <label>电子邮箱</label>
                    <input type="email" class="form-input" placeholder="请输入邮箱" value="" name="email">
                </div>

                <div class="form-group">
                    <label>性别</label>
                    <div class="radio-group">
                        <label class="radio-label">
                            <input type="radio" name="sex" value="男">
                            <span>男</span>
                        </label>
                        <label class="radio-label">
                            <input type="radio" name="sex" value="女">
                            <span>女</span>
                        </label>
                    </div>
                </div>

                <div class="form-group">
                    <label>职业</label>
                    <select class="form-select" name="career">
                        <option value="请选择职业">请选择职业</option>
                        <option value="自由职业者">自由职业者</option>
                        <option value="学生">学生</option>
                        <option value="上班族">上班族</option>
                        <option value="企业主">企业主</option>
                        <option value="工程师">工程师</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>QQ号码</label>
                    <input type="text" class="form-input" placeholder="请输入QQ号码" name="qq" value="">
                </div>

                <div class="form-notice">
                    <p>大计旅行承诺：</p>
                    <p>我们将尊重您的个人隐私，您的个人信息不会公开。</p>
                    <p>我们会为您提供定制个性化的服务，让您享受更优质的出行体验。</p>
                </div>

                <div class="form-actions">
                    <button type="submit" class="save-btn">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!--我的收藏部分-->
    <div class="content-section" id="profile-favorites">
        <div class="favorites-nav">
            <a href="#" class="favorites-nav-item active">出境</a>
            <a href="#" class="favorites-nav-item">国际酒店</a>
            <a href="#" class="favorites-nav-item">景区</a>
            <a href="#" class="favorites-nav-item">周边游</a>
            <a href="#" class="favorites-nav-item">境内游</a>
            <a href="#" class="favorites-nav-item">周边跟团游</a>
            <a href="#" class="favorites-nav-item">海外玩乐</a>
            <a href="#" class="favorites-nav-item">国内酒店</a>
            <a href="#" class="favorites-nav-item">邮轮</a>
        </div>

        <div class="favorites-content">
            <div class="empty-state">
                <p>您的收藏空空如也，现在就 <a href="#" class="discover-link">去发现精彩世界</a></p>
            </div>
        </div>
    </div>

    <!--点评-->
    <div class="content-section" id="profile-reviews">
        <div class="section-header">
            <h2 class="section-title">我的点评</h2>
        </div>
        <div class="reviews-content">
            <div class="empty-state">
                <p>您的点评空空如也，现在就 <a href="#" class="discover-link">去发现精彩世界</a></p>
            </div>
        </div>
    </div>

    <!-- 安全中心部分 -->
    <div class="content-section" id="profile-security">
        <div class="section-header">
            <h2 class="section-title">安全中心</h2>
        </div>

        <div class="security-content">
            <!-- 安全等级提示 -->
            <div class="security-level-tip">
                <div class="level-info">
                    账户安全等级：
                    <div class="progress-bar">
                        <div class="progress" style="width: 100%"></div>
                    </div>
                    <span class="level-text">强</span>
                    继续保持。
                </div>
            </div>

            <!-- 安全项列表 -->
            <div class="security-list">
                <!-- 登录密码 -->
                <div class="security-item">
                    <div class="item-icon verified">✓</div>
                    <%--<div class="item-icon unverified">!</div>--%>
                    <div class="item-info">
                        <div class="item-title">登录密码</div>
                        <div class="item-desc">互联网账户存在被盗风险，建议您定期更改密码以保护账户安全。</div>
                    </div>
                    <div class="action-buttons">
                        <a href="#" class="modify-link">修改密码>></a>
                    </div>
                </div>

                <!-- 邮箱验证 -->
                <div class="security-item">
                    <div class="item-icon verified">✓</div>
                    <div class="item-info">
                        <div class="item-title">邮箱验证</div>
                        <div class="item-desc">已填写邮箱地址</div>
                    </div>
                    <div class="action-buttons">
                        <a href="#" class="modify-link">修改邮箱地址>></a>
                    </div>
                </div>

                <!-- 手机验证 -->
                <div class="security-item">
                    <div class="item-icon verified">✓</div>
                    <div class="item-info">
                        <div class="item-title">手机验证</div>
                        <div class="item-desc"> 已通过验证</div>
                    </div>
                    <div class="action-buttons">
                        <button class="verify-btn">验证手机</button>
                        <a href="#" class="modify-link">更换手机号>></a>
                    </div>
                </div>

                <!-- 交易密码 -->
                <div class="security-item">
                    <div class="item-icon verified">✓</div>
                    <div class="item-info">
                        <div class="item-title">交易密码</div>
                        <div class="item-desc">已交易密码</div>
                    </div>
                    <div class="action-buttons">
                        <a href="#" class="modify-link">设置交易密码>></a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 常用旅客部分 -->
    <div class="content-section" id="frequent-travelers">
        <div class="section-header">
            <h2 class="section-title">常用旅客</h2>
        </div>
        <div class="travelers-content">
        </div>
    </div>

    <!-- 邮寄地址部分 -->
    <div class="content-section" id="mailing-address">
        <div class="section-header">
            <h2 class="section-title">邮寄地址</h2>
        </div>

        <div class="address-content">
            <!-- 顶部操作栏 -->
            <div class="address-header">
                <button class="add-btn" onclick="window.location.href='add_location.jsp'">+ 新增邮寄地址</button>
            </div>

            <!-- 地址列表容器 -->
            <div class="address-list">
            </div>
        </div>
    </div>

    <!-- 常用银行卡 -->
    <div class="content-section" id="bank-cards">
        <div class="section-header">
            <h2 class="section-title">常用银行卡</h2>
        </div>

        <div class="content-card">
            <!-- 空状态提示 -->
            <div class="empty-state">
                <p>没有常用银行卡</p>
            </div>
        </div>
    </div>
</div>
<!-- 修改手机号验证 -->
<div class="verify-modal" style="display: none;">
    <div class="verify-content">
        <div class="verify-header">
            <h3>身份验证</h3>
            <span class="close-btn">&times;</span>
        </div>
        <div class="verify-tabs">
            <div class="tab-item active" data-tab="phone">手机号验证</div>
            <div class="tab-item" data-tab="password">登录密码验证</div>
        </div>
        <div class="verify-body">
            <!-- 手机号验证面板 -->
            <div class="verify-panel phone-panel active">
                <div class="form-item">
                    <label>手机号</label>
                    <div class="input-wrapper">
                        <input type="text" readonly id="phoneNum" value="">
                    </div>
                </div>
                <div class="form-item">
                    <label>验证码</label>
                    <div class="input-wrapper">
                        <input type="text" placeholder="请输入验证码">
                        <button class="send-code-btn">获取验证码</button>
                    </div>
                </div>
            </div>
            <!-- 密码验证面板 -->
            <div class="verify-panel password-panel">
                <div class="form-item">
                    <label>登录密码</label>
                    <div class="input-wrapper">
                        <input type="password" placeholder="请输入登录密码">
                    </div>
                </div>
            </div>
        </div>
        <div class="verify-footer">
            <button class="verify-submit">确认</button>
        </div>
    </div>
</div>
<!-- 底部区域 -->
<footer class="site-footer">
    <div class="service-highlights">
        <div class="highlight-item">
            <i class="icon-price"></i>
            <span>价格公正，安心购买</span>
        </div>
        <div class="highlight-item">
            <i class="icon-quality"></i>
            <span>品质保证，放心出行</span>
        </div>
        <div class="highlight-item">
            <i class="icon-service"></i>
            <span>产品丰富，一站式服务</span>
        </div>
        <div class="highlight-item">
            <i class="icon-support"></i>
            <span>专业顾问，24小时客服</span>
        </div>
    </div>

    <div class="footer-content">
        <div class="footer-section">
            <h3>消费者服务</h3>
            <p>同程投诉受理电话：95711</p>
            <p>同程投诉受理邮箱：tcfwfxbz@ly.com</p>
        </div>

        <div class="footer-section">
            <h3>关于同程</h3>
            <ul>
                <li><a href="/about" class="footer-link">同程简介</a></li>
                <li><a href="/sites" class="footer-link">可信网站</a></li>
                <li><a href="/sitemap" class="footer-link">网站地图</a></li>
                <li><a href="/terms" class="footer-link">用户协议与隐私条款</a></li>
            </ul>
        </div>

        <div class="footer-section">
            <h3>加盟合作</h3>
            <ul>
                <li><a href="/join" class="footer-link">合作加盟</a></li>
                <li><a href="/business" class="footer-link">商旅合作</a></li>
                <li><a href="/insurance" class="footer-link">旅游保险</a></li>
                <li><a href="/store" class="footer-link">门店合作</a></li>
            </ul>
        </div>

        <div class="footer-section" id="footer-section">
            <h3>同程旅行app</h3>
            <div class="qr-code">
                <img src="statics/img/erweima.png" alt="扫描下载APP">
                <p>手机预订更优惠</p>
            </div>
        </div>
    </div>

    <div class="popular-links">
        <div class="links-section">
            <span>热点推荐：</span>
            <a href="/disneyland" class="footer-link">迪斯尼旅游</a>
            <a href="/thailand" class="footer-link">泰国旅游</a>
            <a href="/japan" class="footer-link">日本旅游</a>
        </div>
    </div>

    <div id="foot-bottom">
        <p>Copyright © 2002-2024 版权所有 <a href="#">同程网络科技股份有限公司</a></p>
        <p><a href="#">经营许可证编号：合字B2-20180016</a> <a href="#">备案序号：苏ICP备09033604号</a></p>
    </div>
</footer>
</body>
<script src="statics/js/navigation.js"></script>
<script src="statics/js/orders.js"></script>
<script src="statics/js/wallet.js"></script>
<script src="statics/js/invoice.js"></script>
<script src="statics/js/Info.js"></script>
<script src="statics/js/add_travelers.js"></script>
<script src="statics/js/add_location.js"></script>
<script src="statics/js/update_phone.js"></script>
<script src="statics/js/getTravelers.js"></script>
<script src="statics/js/LocationInfo.js"></script>
<script src="statics/js/Head_feet.js"></script>
<script src="statics/js/GetRecentOrders.js"></script>
</html>